<html>
<title>父子组件和组件间通信</title>

<head>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="container">
        <my-hello></my-hello>
    </div>

    <template id="hello">
        <div>
            <h3>我是Hello父组件</h3>
            <h3>访问自己的数据： {{ msg }},{{ name }},{{ age }},{{user.userName}}</h3>
            <h3>访问子组件的数据： {{ height }},{{ weight }}</h3>
            <!--  @e-world意思是监听事件e-world -->
            <my-world :message="msg" :pname="name" :age="age" :user="user" @e-world="getData"></my-world>
        </div>
    </template>

    <template id="world">
        <div>
            <h3>我是world子组件</h3>
            <h3>访问自己的数据： {{ height }},{{ weight }}</h3>
            <h3>访问父组件的数据： {{ message }},{{ pname }},{{ age }},{{user.userName}}</h3>
            <button @click="send">发送数据给父组件</button>
        </div>
    </template>

    <script>
        var vm = new Vue({//跟组件
            components: {
                'my-hello': {//父组件
                    template: '#hello',
                    methods: {
                        getData(height, weight) {
                            this.weight = weight;
                            this.height = height;
                        }
                    },
                    //组件中传入的数据必须用data方法
                    data() {
                        return {
                            msg: '沃尔玛',
                            name: 'tom',
                            age: 18,
                            user: { id: 9527, userName: 'jerry' },
                            height: {},
                            weight: 0
                        }
                    },
                    components: {//子组件
                        'my-world': {
                            template: '#world',
                            data() {
                                return {
                                    height: 180,
                                    weight: 200
                                }
                            },
                            //props: ["message", "pname", "age", "user"]//简单的字符串数组
                            props: {//也可以配置对象，进行一些高级设置，比如校验类型、设置默认值、校验数值等等。
                                message: String,
                                pname: {
                                    type: String,
                                    required: true//是否必须
                                },
                                age: {
                                    type: Number,//数据类型
                                    default: 18,//设置默认值
                                    validator: function (value) {//校验属性
                                        return value >= 0;
                                    }
                                },
                                user: {
                                    type: Object,
                                    default: function () {
                                        return { id: 3306, name: "王五" }//数组和对象的默认值必须使用一个工厂函数
                                    }
                                }
                            },
                            methods: {
                                send() {//此处的this表示当前子组件实例，使用$emit触发一个事件发送给父组件
                                    this.$emit('e-world', this.height, this.weight);
                                }
                            }
                        }
                    }
                }
            }
        }).$mount('.container');
    </script>

</body>

</html>